<script setup lang="ts">
import myTopic from "@/composables/myTopic.ts";
import * as Icon from '@icon-park/vue-next';
const {cats,getCats,topics,getTopics,getOneCatTopics} = myTopic();
const route = useRoute();
await getCats();
watch(route,async ()=>{
  const c_id = route.params?.c_id;
  if(c_id){
    myLocalStore().set('c_id',c_id)
    await getOneCatTopics();
  }else{
    await getTopics()
  }
},{
  immediate:true
})
const searchWords = ref('');
const search = ()=>{
  getTopics(1,{key:"title",keywords:searchWords.value})
}
const refresh = ()=>{
  searchWords.value='';
  getTopics(1,{key:"title",keywords:searchWords.value})
}
</script>

<template>
<main class="home">
  <section class="cats" v-if="cats">
    <div class="item" v-for="(item,index) in cats" :key="index">
      <router-link :to="{name:'per.cat',params:{c_id:item.id}}" :class="{active:(route as any).params?.c_id == item.id}">
        <component :is="Icon[item.icon!]" />
        <span>{{item.title}}</span>
      </router-link>
    </div>
  </section>
  <section class="addTopic">
    <div class="search">
      <el-input placeholder="请输入搜索内容" v-model="searchWords" @keyup.enter="search()"/>
      <el-button-group class="w-[200px]">
        <el-button type="primary" @click="search()"><icon-search /></el-button>
        <el-button type="success" @click="refresh()"><icon-refresh /></el-button>
      </el-button-group>

    </div>
    <el-button type="primary" @click="$router.push({name:'front.topic.add'})">
      <icon-add-picture theme="outline" size="20" />&nbsp;
      <span>发布帖子</span>
    </el-button>
  </section>
  <section class="list" v-if="topics">
    <my-animate-list-plus :tag="'ul'">
      <my-topic-item
          :data-index="index"
          v-for="(item,index) in topics.data"
          :key="item.id"
          :item="item"
      />
    </my-animate-list-plus>
    <div class="pages" v-if="route.params?.c_id">
      <el-pagination
          :hide-on-single-page="true"
          :page-size="topics.meta.per_page"
          :current-page="topics.meta.current_page"
          background
          layout="prev, pager, next,total"
          :total="topics.meta.total"
          @current-change="getOneCatTopics"
      />
    </div>
    <div class="pages" v-else>
      <el-pagination
          :hide-on-single-page="true"
          :page-size="topics.meta.per_page"
          background
          layout="prev, pager, next,total"
          :total="topics.meta.total"
          @current-change="getTopics"
      />
    </div>
  </section>
</main>
</template>

<style lang="scss" scoped>
main.home{
  section.cats{
    @apply grid grid-cols-6 gap-2 border shadow p-3 text-sm text-slate-600 ;
    div.item{
      @apply flex items-center justify-center;
      a{
        @apply w-2/3 py-1 flex justify-center items-center gap-1 hover:cursor-pointer hover:text-green-600 duration-300;
        &.active{
          @apply bg-green-600 text-slate-100 rounded;
        }
      }
    }
  }
  section.addTopic{
    @apply flex items-center justify-between pt-4 pb-2;
    div.search{
      @apply flex justify-start items-center gap-2 w-1/3 ;
    }
  }
  section.list{
    @apply min-h-screen;
    ul{

    }
    div.pages{
      @apply p-3 mt-3 flex justify-end;
    }
  }
}
</style>